<template>
	<view>
		<u-navbar back-text="返回" title="新建工资托管" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
		</u-navbar>
		<!-- 内容 -->
		<view class="top-card">
			<view class="top-title">
				选择已发布的职位
			</view>
			<view class="select-type" @click="showKindType=true">
				<view class="left-text">
					{{ form.kind?form.kind:'成都市招支模工' }}
				</view>
				<view class="right-icon">
					<image src="../../../static/images/common/right.png" mode=""></image>
				</view>
			</view>
			<view class="add-user">
				<view class="left">
					选择入职员工
				</view>
				<view class="right" @click="showAdduser">
					添加
				</view>
			</view>
			<view class="user-box">
				<view class="user-line-box">
					<view class="user-item">
						<view class="user-left">
							<view class="user-name">
								张三
							</view>
							<view class="select-day" @click="openDay(1)">
								<view class="day-num">
									8
								</view>
								<view class="day-icon">
									<image src="../../../static/images/common/select-icon.png" mode=""></image>
								</view>
								<view class="day-text">
									天
								</view>
							</view>
							<view class="select-money">
								<input type="number" value="" />
							</view>
							<view class="money-text">
								元
							</view>
						</view>
						<view class="user-right">
							删除
						</view>
					</view>
					<view class="status">
						(申请中)
					</view>
				</view>
			</view>
			<view class="remark-box">
				备注
			</view>
			<view class="remark-text">
				<textarea class="textarea" placeholder-class="pleace" placeholder="请输入(100以内)" maxlength="200" />
				</view>
			<view class="trusteeship-money">
				共计需托管：<text>
					￥4000元
				</text>
			</view>
			<view class="explain-box">
				《工资托管服务说明》
			</view>
			<view class="foot-btn">
				确认存入
			</view>
		</view>
		<!-- 内容 -->
		<u-select v-model="showKindType" mode="mutil-column-auto" :list="kindList" @confirm="selectJobType"></u-select>
		<u-select v-model="showDay" mode="single-column" :list="dayList" @confirm="selectJobType"></u-select>
		<u-mask :show="show" @click="show = false" duration="100">
			<view class="warp" :style="{'background-image': 'url(../../../static/images/job/adduserbg.png)'}">
				<scroll-view scroll-y="true" >
					<view class="user-item">
						<view class="left">
							王乙
						</view>
						<view class="right" @click.stop="selectUser">
							<image src="../../../static/images/job/click.png" mode=""></image>
							<!-- <image src="../../../static/images/job/unactive.png" mode=""></image> -->
						</view>
					</view>
				</scroll-view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import multipleMixin from '@/mixin/multiple-data-mixin';
	export default{
		mixins: [multipleMixin],
		data(){
			return{
				show:false,
				showKindType:false,
				showDay:false,
				dayList:[{
						value: 0.5,
						label:'0.5'
					},{
						value: 1,
						label:'1'
					},{
						value:2,
						label:'2'
					},],
				form:{
					kind:''
				}
			}
		},
		methods:{
			selectJobType(e) {
				this.form.kind = e[2].label
			},
			openDay(index){
				console.log(110)
				this.showDay = true
			},
			showAdduser(){
				this.show = true
			},
			selectUser(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-card{
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		background:rgba(255,255,255,1);
		opacity:1;
		.top-title{
			font-size:28rpx;
			font-weight:400;
			line-height:37rpx;
			color:rgba(153,153,153,1);
			opacity:1;
		}
		.select-type{
			margin-top: 20rpx;
			width: 100%;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid rgba(223,223,223,1);
			display: flex;
			justify-content: space-between;
			.left-text{
				font-size:32rpx;
				font-weight:600;
				line-height:43rpx;
				color:rgba(102,102,102,1);
				opacity:1;
				text{
					display: inline-block;
					margin-left: 30rpx;
					font-size:26rpx;
					font-weight:400;
					line-height:35rpx;
					color:rgba(102,102,102,1);
					opacity:1;
				}
			}
			.right-icon{
				width: 14rpx;
				height: 24rpx;
				image{
					width: 14rpx;
					height: 24rpx;
				}
			}
		}
		.add-user{
			width: 100%;
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			position: relative;
			.left{
				font-size:28rpx;
				font-weight:400;
				line-height:70rpx;
				color:rgba(153,153,153,1);
				opacity:1;
			}
			.right{
				width:160rpx;
				height:70rpx;
				background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
				opacity:1;
				border-radius:8rpx;
				font-size:30rpx;
				font-weight:400;
				line-height:70rpx;
				text-align: center;
				color:rgba(255,255,255,1);
				opacity:1;
			}
		}
		.user-box{
			margin-top: 40rpx;
			width: 100%;
			.user-line-box{
				border-bottom: 1rpx solid rgba(223,223,223,1);
				.user-item{
					display: flex;
					.user-left{
						flex: 1;
						display: flex;
						line-height:60rpx;
						.user-name{
							font-size:32rpx;
							font-weight:400;
							color:rgba(102,102,102,1);
							opacity:1;
							
						}
						.select-day{
							margin-left: 60rpx;
							display: flex;
							.day-num{
								font-size:40rpx;
								font-weight:400;
								color:rgba(102,102,102,1);
								opacity:1;
							}
							.day-icon{
								width: 24rpx;
								height: 14rpx;
								margin-left: 20rpx;
								image{
									width: 24rpx;
									height: 14rpx;
								}
							}
							.day-text{
								margin-left: 30rpx;
								font-size:32rpx;
								font-weight:400;
								color:rgba(102,102,102,1);
								opacity:1;
							}
						}
						.select-money{
							margin-left: 60rpx;
							max-width: 100rpx;
							uni-input{
								height: 100%;
								width: 100%;
							}
							imput{
								width: 100rpx;
								height: 60rpx;
								line-height:60rpx ;
								text-align: right;
							}
						}
						.money-text{
							font-size:32rpx;
							font-weight:400;
							color:rgba(102,102,102,1);
							opacity:1;
						}
					}
					.user-right{
						width:105rpx;
						height:60rpx;
						border:1rpx solid rgba(153,153,153,1);
						border-radius:8rpx;
						line-height: 60rpx;
						text-align: center;
						font-size:30rpx;
						font-weight:400;
						color:rgba(153,153,153,1);
						opacity:1;
					}
				}
				.status{
					font-size:22rpx;
					font-weight:600;
					height: 37rpx;
					line-height:20rpx;
					color:rgba(211,176,104,1);
					opacity:1;
				}
			}
			
		}
		.remark-box{
			margin-top: 40rpx;
			font-size:28rpx;
			font-weight:400;
			line-height:37rpx;
			color:rgba(153,153,153,1);
			opacity:1;
		}
		.remark-text{
			margin-top: 30rpx;
			.textarea {
				width: 100%;
				height: 200rpx;
				background: rgba(246, 246, 246, 1);
				border-radius: 10rpx;
				padding: 28rpx 26rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 37rpx;
				opacity: 1;
			}
			
			.pleace {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 37rpx;
				color: rgba(153, 153, 153, 1);
				opacity: 1;
			}
		}
		.trusteeship-money{
			margin-top: 30rpx;
			line-height: 43rpx;
			font-size:22rpx;
			font-weight:600;
			color:rgba(153,153,153,1);
			opacity:1;
			text{
				display: inline-block;
				margin-left: 6rpx;
				font-size:32rpx;
				font-weight:600;
				color:rgba(255,0,0,1);
				opacity:1;
			}
		}
		.explain-box{
			width: 100%;
			text-align: center;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			font-size:28rpx;
			font-weight:600;
			line-height:37rpx;
			color:rgba(211,176,104,1);
			opacity:1;
		}
		.foot-btn{
			width:100%;
			height:90rpx;
			background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
			opacity:1;
			border-radius:8rpx;
			line-height: 90rpx;
			text-align: center;
			font-size:30rpx;
			font-weight:600;
			color:rgba(255,255,255,1);
			opacity:1;
		}
	}
	.warp{
		width: 268rpx;
		height: 394rpx;
		padding: 17rpx 20rpx 16rpx;
		box-sizing: border-box;
		background-size: 100%,100%;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		top: 370rpx;
		right: 30rpx;
		scroll-view{
			width: 100%;
			height: 100%;
			.user-item{
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid rgba(221,221,221,1);
				padding: 0 20rpx 13rpx;
				margin-top: 22rpx;
				.left{
					font-size:30rpx;
					line-height:30rpx;
					color:rgba(0,0,0,1);
					opacity:1;
				}
				.right{
					margin-top: 4rpx;
					width: 32rpx;
					height: 32rpx;
					image{
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}
</style>
